<div class="header">
    <div class="top container clear">
        <div class="fl">
            <a href="">Sublimation</a>
            <a href="">Fabric Guide</a>
            <a href="">Gallery</a>
            <a href="">FAQs</a>
            <a href="">Contact Us</a>
            <a href="">Customer Reviews</a>
        </div>
        <div class="login-info fr clear">
            <a class="login-btn fr" href=""><img src="../img/dingbudaohang1.jpg" alt=""/><span class="text-capitalize text-overflow text-center">register/login</span><img src="../img/dingbudaohang-xsj.jpg" alt=""/></a>
            <a class="cart fr" href=""><img src="../img/dingbudaohang2.jpg" alt=""/><span class="text-capitalize text-overflow text-center">shopping cart</span><img src="../img/dingbudaohang-xsj.jpg" alt=""/></a>
        </div>
    </div>
    <div class="middle container clear">
        <div class="logo-box fl clear">
            <img class="logo fl" src="../img/daohang-logo.jpg" alt=""/>
            <div class="smell-icon fl">
                <a href=""><img src="../img/daohang-1.jpg" alt=""/></a>
                <a href=""><img src="../img/daohang-2.jpg" alt=""/></a>
                <a href=""><img src="../img/daohang-3.jpg" alt=""/></a>
                <a href=""><img src="../img/daohang-4.jpg" alt=""/></a>
                <a href=""><img src="../img/daohang-5.jpg" alt=""/></a>
            </div>
        </div>
        <div class="search fr clear">
            <input class="fl text-capitalize fs-12" type="text" placeholder="search for product"/>
            <div class="search-btn text-uppercase b-red fl clear"><img class="fl" src="../img/header-shousuo.jpg" alt=""/><span class="fl white fs-16 bold">search store</span></div>
        </div>
    </div>
    <div class="nav container-fluid">
        <ul class="container clear">
            <li>
                <a class="nav-item" href="../html/index.html">home</a>
            </li>
            <li>
                <a class="nav-item" href="../html/about_us.html">about us</a>
            </li>
            <li>
                <a class="nav-item" href="../html/clothing.html">clothing</a>
            </li>
            <li class="access">
                <a class="nav-item" href="../html/accessories.html">accessories</a>
                <div class="access-box">
                    <div class="container clear">
                        <div class="row">
                            <div class="col-6 left clear">
                                <dl class="fl">
                                    <dd class="bold">
                                        <a href="">SHOP BY CATEGORY</a>
                                    </dd>
                                    <dd>
                                        <a href="">bage & purses</a>
                                    </dd>
                                    <dd>
                                        <a href="">hats</a>
                                    </dd>
                                    <dd>
                                        <a href="">scarves</a>
                                    </dd>
                                    <dd>
                                        <a href="">belts</a>
                                    </dd>
                                    <dd>
                                        <a href="">watches</a>
                                    </dd>
                                    <dd>
                                        <a href="">hair accessories</a>
                                    </dd>
                                    <dd>
                                        <a href="">jewellery</a>
                                    </dd>
                                    <dd>
                                        <a href="">socks & tights</a>
                                    </dd>
                                    <dd>
                                        <a href="">sunglasses</a>
                                    </dd>
                                </dl>
                                <dl class="fl b">
                                    <dd>
                                        <a href="">gifts & novelty</a>
                                    </dd>
                                    <dd>
                                        <a href="">iphone accseeories</a>
                                    </dd>
                                    <dd class="bold">
                                        <a href="">shop by collection</a>
                                    </dd>
                                    <dd>
                                        <a href="">wearables</a>
                                    </dd>
                                    <dd>
                                        <a href="">key to freedom</a>
                                    </dd>
                                    <dd class="bold">
                                        <a href="">brands at topshop</a>
                                    </dd>
                                    <dd>
                                        <a href="">accessories brands</a>
                                    </dd>
                                    <dd>
                                        <a href="">brands A-Z</a>
                                    </dd>
                                </dl>
                            </div>
                            <div class="col-6 right">
                                <a href=""><img src="../img/vimostsports（Accessories）导航悬停样式_03.jpg" alt=""/></a>
                                <a href=""><img src="../img/vimostsports（Accessories）导航悬停样式_05.jpg" alt=""/></a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <a class="nav-item" href="../html/blog.html">blog</a>
            </li>
            <li>
                <a class="nav-item" href="../html/how_to_order.html">how to order</a>
            </li>
            <li>
                <a class="nav-item" href="../html/order_process.html">order process</a>
            </li>
        </ul>
    </div>
</div>
<!--提示弹出框-->
<div class="warning-modal">
    <div class="warning-modal-box">
        <div class="content clear">
            <div class="fl">
                <h2>DON'T READ BELLOW!</h2>
                <h4>Oh you cheeky monkey you did.</h4>
                <p>Oh you cheeky monkey you did.Oh you cheeky monkey you did.Oh you cheeky monkey you did.Oh you cheeky monkey you did.Oh you cheeky monkey you did.Oh you cheeky monkey you did.Oh you cheeky monkey you did.</p>
                <h5>* Minimum spend $50</h5>
            </div>
            <div class="fr">
                <div class="warning-close">
                    <img src="../img/vimostsports-tantu_03.png" alt=""/>
                </div>
                <div class="war-img-box">
                    <img src="../img/vimostsports-tantu_07.png" alt=""/>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="email fs-14">
                <input type="text" placeholder="Enter your email address"/>
            </div>
            <div class="btn b-red white fs-20">SIGNUP<img src="../img/vimostsports-tantu_11.png"/></div>
        </div>
    </div>
</div>

<!--登录框-->
<div class="login-modal">
    <div class="login-modal-box">
        <div class="login-modal-close"><img src="../img/vimostsports-tantu_03.png" alt=""/></div>
        <ul>
            <li>
                <p>Email Address<span class="red">*</span>:</p>
                <input type="text"/>
            </li>
            <li>
                <p>Password<span class="red">*</span>:</p>
                <input type="password"/>
            </li>
        </ul>
        <div class="login-btn clear">
            <div class="btn b-red fl white bold">LOGIN</div>
            <a class="fr" href="">Forget Password?</a>
        </div>
        <div class="create-account">
            <a href="">Create an account</a>
        </div>
    </div>
</div>

<style>

</style>
<!--注册框-->
<div class="register-modal">
    <div class="register-modal-mask"></div>
    <div class="register-modal-box">
        <div class="register-modal-close"><img src="../img/vimostsports-tantu_03.png" alt=""/></div>
        <p class="register-modal-title">REGISTER</p>
        <ul>
            <li class="clear">
                <div class="left-name">first name<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="text"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">last name<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="text"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">email name<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="text"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">Password<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="password"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">confirm password<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="password"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">country<span class="red">*</span>:</div>
                <div class="right-input clear">
                    <select class="area fl">
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                    </select>
                    <div class="sex fr">gender:
                        <label>
                            <input type="radio" name="sex"/>
                            <span>female</span>
                        </label>
                        <label>
                            <input type="radio" name="sex"/>
                            <span>male</span>
                        </label>
                    </div>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">birthday:</div>
                <div class="right-input date">
                    <select class="year" id="year">
                        <option value="">year</option>
                    </select>
                    <select class="year" id="month">
                        <option value="">month</option>
                    </select>
                    <select class="year" id="day">
                        <option value="">day</option>
                    </select>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">skype<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="text"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">phone<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="text"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">facebook<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="text"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">twitter<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="text"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">instagram<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="text"/>
                </div>
            </li>
            <li class="clear">
                <div class="left-name">website<span class="red">*</span>:</div>
                <div class="right-input">
                    <input type="text"/>
                </div>
            </li>
        </ul>
        <div class="submit b-red white">Submit</div>
    </div>
</div>


<!--忘记密码框-->
<div class="password-modal">
    <div class="password-modal-box password-modal-box1">
        <div class="login-modal-close"><img src="../img/vimostsports-tantu_03.png" alt=""/></div>
        <b>FORGET PASSWORD</b>
        <ul>
            <li>
                <p>Email Address<span class="red">*</span>:</p>
                <input type="text"/>
            </li>
            <li>
                <p>Activation Code<span class="red">*</span>:</p>
                <div class="clear">
                    <input class="qr-code fl" type="text"/>
                    <div class="qr-btn fr">Get verification code</div>
                </div>
            </li>
        </ul>
        <h4>Verification code has been sent into the mailbox,please check your mailbox and enter the verification code</h4>
        <div class="password-btn b-red white bold text-center">Next Step</div>
    </div>

    <div class="password-modal-box password-modal-box2">
        <div class="login-modal-close"><img src="../img/vimostsports-tantu_03.png" alt=""/></div>
        <b>FORGET PASSWORD</b>
        <ul>
            <li>
                <p>Enter new password<span class="red">*</span>:</p>
                <input type="password"/>
            </li>
            <li>
                <p>Confirm new password<span class="red">*</span>:</p>
                <input type="password"/>
            </li>
        </ul>
        <div class="password-btn b-red white bold text-center">Determine</div>
    </div>
</div>

<!--密码修改成功框-->
<div class="password-s-modal">
    <div class="password-s-modal-box">
        <div class="p-s-close"><img src="../img/vimostsports-tantu_03.png" alt=""/></div>
        <p>PASSWORD CHANGE SUCCESS!</p>
    </div>
</div>

<!--注册成功提示框-->
<div class="login-s-modal">
    <div class="login-s-modal-box">
        <div class="l-s-close"><img src="../img/vimostsports-tantu_03.png" alt=""/></div>
        <h4>login was successful!</h4>
        <p>think you for your registration please check your email and click the register link to complete the registration!
            <a class="red" href="http://mail.163.com">http://mail.163.com/</a>
        </p>
    </div>
</div>